<template>
    <div>

        <!-- 地址 -->
          <div class="address" @click="$router.push('/adress')">
      <!-- 无地址 -->
      <div v-if="!address.username">
        <van-button type="primary" >新增收货地址</van-button>
      </div>
      <!-- 有地址 -->
      <div v-else>
        <div>{{address.username}} {{address.userphone}}</div>
        <div class="bg" v-if="address.status==1">默认</div>
        <div class="bg">{{address.label}}修改</div>
        <div>{{address.location+address.useraddress}}</div>
      </div>
    </div>
 <!-- 展示购物车的数据 -->
    <van-card
      v-for="item in shopList"
      :key="item.id"
      :title="item.goodsname"
      :thumb="$pre + item.img"
    >
      <div slot="price">￥{{ item.price }}</div>
      <div slot="num">
        <span class="num-span">{{ item.num }}</span>
      </div>
    </van-card>


    <!-- 总价 -->
    <div class="zongjia">总价:{{allPrice}}</div>

    <van-button type="primary" @click="confirm" color="pink" style="float:right">确认下单</van-button>
  </div>
</template>
    </div>
</template>
<script>
import { shoplist, reqAddressList, reqOrder } from "../../http/http";
export default {
    data() {
     return {
      //1.购物车列表
      shopList: [],
      allPrice: 0,
      //地址
      address:{}
    };
    },
   
   mounted() {
    //2.请求购物车数据
    this.shopList = [];
    let idArr = JSON.parse(localStorage.getItem("shopInfo")).idstr.split(","); //['13','19','20']
    console.log(idArr);
    // 循环一遍idArr，取数据
    idArr.forEach((id) => {
      //请求购物车
      shoplist({
        uid: JSON.parse(localStorage.getItem("userInfo")).uid,
        id: id,
      }).then((res) => {
        if (res.data.code == 200) {
            console.log(res);
          this.shopList.push(res.data.list[0]);
        }
      });
    });

    // 3.取出总价
    this.allPrice = JSON.parse(localStorage.getItem("shopInfo")).countmoney;

    //4 取地址
    /*
    地址栏中有可能有addressId ,如果有，取出这条地址；
    如果没有addressId，取出默认地址；
    如果默认地址也没有，出现 新增收货地址*/
    if(this.$route.query.addressId){
      //根据addressId请求地址
      reqAddressList({
        uid:JSON.parse(localStorage.getItem("userInfo")).uid,
        id:this.$route.query.addressId
      }).then(res=>{
        if(res.data.code==200){
          this.address=res.data.list[0]
        }
      })
    }else{
      //请求默认地址
      reqAddressList({
         uid:JSON.parse(localStorage.getItem("userInfo")).uid,
         status:1
      }).then(res=>{
        if(res.data.code==200){
            //如果有默认地址，返回的是数组，数组里面的数据status =1
            // 如果没有默认地址，返回也是数组，数组里面没有一条status=1

            let arr=res.data.list?res.data.list:[]
            if(arr.every(item=>item.status!=1)){
              //没有默认地址 
              this.address={}
            }else{
              this.address=arr[0]
            }
        }
      })
    }
  },
   methods: {
          confirm(){
      reqOrder({
          ...JSON.parse(localStorage.getItem("shopInfo")),
          uid:JSON.parse(localStorage.getItem("userInfo")).uid,
          addressid:this.address.id
      }).then(res=>{
        if(res.data.code==200){
          this.$router.replace("/pay?orderid="+res.data.list.outTradeNo)
        }
      })
    }
    },
}
</script>
<style scoped>
.address {
  margin: 20px;
  background: #f4f4f4;
  padding: 20px;
}
.bg{
  background: pink;
  color: #fff;
  display:inline-block;
  padding: 0.2rem;
  margin: 0.2rem;
}
.zongjia{
  height: 1rem;
  line-height: 1rem;
}
</style>